<template>
  <Box>
    <h2 slot="title" style="margin: 10px 15px">审批进度</h2>
    <div slot="box">
      <div style="box-sizing: border-box;padding: 10px">
        <a-steps :current="current">
          <a-popover slot="progressDot" slot-scope="{ index, status, prefixCls }">
            <template slot="content">
              <span>step {{ index }} status: {{ status }}</span>
            </template>
            <span :class="`${prefixCls}-icon-dot`" />
          </a-popover>
          <!--          <a-step title="发起人">-->
          <!--            <div slot="description">{{ this.Midata[0].approverName }}</div>-->
          <!--            <div slot="description">{{ this.Midata[0].createTime }}</div>-->
          <!--          </a-step>-->
          <a-step v-for="(item, index) in this.Midata" :title="item.nodeName" style="display: flex" :key="index">
            <template v-if="index = 1">
              <div slot="description">{{ item.approverName }}</div>
              <div :style="item.statusName == '驳回' ? 'color:red' : 'color:#53C41B'" slot="description">
                {{ item.statusName }}
              </div>
              <div
                v-if="item.remark"
                slot="description"
              >
                审批原因：{{ item.remark }}
              </div>
              <div slot="description">{{ item.approverTime }}</div>
              <div slot="description" v-if="item.nodeName == '发起人'">{{ item.createTime }}</div>
            </template>
          </a-step>
        </a-steps>
      </div>
    </div>
  </Box>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
export default {
  name: 'Approve',
  components: { Box },
  props: {
    Midata: Array
  },
  data(){
    return {
      current:0
    }
  },
  mounted() {

  },

  watch:{
    Midata:{
      immediate: true,
      handler(c,b){
        console.log(this.Midata)
        let arr = [...this.Midata] || []
        // let arr = this.Midata
        console.log(arr)
        arr.shift()
        console.log(arr)
        let a = 0
        for(let item of arr){
          a++
          if(item.statusName === this.Midata[0].statusName){
            this.current = a
            console.log(a)
          }
        }
        for (let i=this.current+1; i<this.Midata.length; i++){
          // console.log(this.Midata[i])
          if(this.Midata[i].statusName !== '未到审批'){
            this.current+=1
          }
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/.ant-steps-label-vertical .ant-steps-item-content {
  text-align: left !important;
  position: relative;
  left: 30px;
}
</style>
